<template>
  <div id="issues-list" class="custom-table" v-loading="isLoading">
    <div v-if="!issues.length" class="easy-container no-data">{{ isLoading ? '' : '暂无数据' }}</div>
    <div v-for="issue in issues" :key="issue.id" class="easy-container flex content-space-between">
      <div class="cell flex-1" style="min-width: 0">
        <div class="flex flex-wrap">
          <el-tag
            v-if="communityTag && currentSpace.id !== issue.spaceId"
            type="danger"
            size="mini"
            class="m-r-5"
            v-text="'社区共享'"
          />
          <el-tag v-if="issue.essence" type="danger" size="mini" class="m-r-5">精</el-tag>
          <div class="flex-1 flex flex-wrap" style="min-width: 0;">
            <router-link
              :to="initIssueShowPath(issue.spaceId, issue.id)"
              :title="issue.title"
              class="title link line1"
              :class="issue.essence ? 'good-resource-text' : ''"
              v-text="issue.title"
            />
            <el-tag v-for="tag in issue.tags" :key="tag" size="mini">{{ tag }}</el-tag>
          </div>
        </div>
        <p>
          <router-link :to="initUserShowPath(issue.authorId)" class="link">
            {{ issue.authorNickname }}</router-link>
          <timeago class="info" :date-time="issue.created_at" pre-text=" - 创建于"/>
        </p>
      </div>
      <div class="cell" v-if="ownershipDisplay" style="min-width: 11.25rem;">
        <div>所属空间</div>
        <router-link :to="initOwnershipSpacePath(issue.spaceId)"
                     class="title link no-warp-ellipsis">{{ issue.spaceTitle }}</router-link>
      </div>
      <div class="cell" style="min-width: 7.5rem;">
        <IssuesListIcons :issue="issue"/>
        <timeago :date-time="issue.updated_at" pre-text="更新于"/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import IssuesListIcons from './IssuesListIcons';

export default {
  name: 'IssuesList',
  components: { IssuesListIcons },
  props: {
    issues: { // 问题列表数据
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在加载列表
      type: Boolean,
      required: true,
    },
    ownershipDisplay: { // 是否显示空间归属
      type: Boolean,
      default: false,
    },
    communityTag: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(['currentSpace']),
  },
  methods: {
    // 生成issue的跳转链接
    initIssueShowPath(spaceId, issueId) { return `/${this.$rp.SPACES}/${spaceId}/${this.$rp.SPACE_ISSUES}/${issueId}`; },
    // 生成查看用户的跳转链接
    initUserShowPath(userId) { return `/${this.$rp.USERS}/${userId}`; },
    // 生成issue归属空间的跳转链接
    initOwnershipSpacePath(spaceId) { return `/${this.$rp.SPACES}/${spaceId}`; },
  },
};
</script>

<style></style>
